<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>食物数据库 - 饮食营养管理系统</title>
    <!-- TailwindCSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
    <!-- Vue.js CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body class="bg-gray-50">
    <div id="app" class="min-h-screen flex flex-col">
        <!-- 顶部导航栏 -->
        <nav class="bg-emerald-600 text-white shadow-md">
            <div class="container mx-auto px-4 py-3 flex justify-between items-center">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-leaf text-2xl"></i>
                    <span class="text-xl font-bold">营养师后台管理系统</span>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="#" class="hover:text-emerald-200">
                        <i class="fas fa-bell"></i>
                        <span class="bg-red-500 text-white rounded-full w-5 h-5 text-xs flex items-center justify-center absolute -mt-8 ml-3">3</span>
                    </a>
                    <div class="relative group">
                        <div class="flex items-center space-x-2 cursor-pointer">
                            <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=150&h=150&q=80" 
                                class="w-8 h-8 rounded-full object-cover" alt="用户头像">
                            <span>管理员</span>
                            <i class="fas fa-chevron-down text-xs"></i>
                        </div>
                        <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden group-hover:block">
                            <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-emerald-100">
                                <i class="fas fa-user mr-2"></i>个人信息
                            </a>
                            <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-emerald-100">
                                <i class="fas fa-cog mr-2"></i>系统设置
                            </a>
                            <div class="border-t border-gray-200 my-1"></div>
                            <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-emerald-100">
                                <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 主要内容区 -->
        <div class="flex flex-1">
            <!-- 侧边导航 -->
            <aside class="bg-white w-64 shadow-md">
                <div class="p-4">
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                            <i class="fas fa-search text-gray-400"></i>
                        </span>
                        <input type="text" class="pl-10 pr-4 py-2 w-full rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" 
                            placeholder="搜索...">
                    </div>
                </div>
                <nav class="mt-2">
                    <a href="index.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-home mr-3"></i>
                        <span>仪表盘</span>
                    </a>
                    <a href="users.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-users mr-3"></i>
                        <span>用户管理</span>
                    </a>
                    <a href="foods.html" class="flex items-center px-4 py-3 text-emerald-600 bg-emerald-50 border-l-4 border-emerald-600">
                        <i class="fas fa-apple-alt mr-3"></i>
                        <span>食物数据库</span>
                    </a>
                    <a href="recipes.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-utensils mr-3"></i>
                        <span>食谱管理</span>
                    </a>
                    <a href="diet-records.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-clipboard-list mr-3"></i>
                        <span>饮食记录</span>
                    </a>
                    <a href="nutrition.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-chart-pie mr-3"></i>
                        <span>营养分析</span>
                    </a>
                    <a href="settings.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-emerald-600">
                        <i class="fas fa-cog mr-3"></i>
                        <span>系统设置</span>
                    </a>
                </nav>
            </aside>

            <!-- 主内容 -->
            <main class="flex-1 p-6">
                <div class="mb-6 flex justify-between items-center">
                    <div>
                        <h1 class="text-2xl font-bold text-gray-800">食物数据库</h1>
                        <p class="text-gray-600">管理食物数据、分类和营养信息</p>
                    </div>
                    <button id="openAddFoodModalBtn" class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-md flex items-center">
                        <i class="fas fa-plus mr-2"></i>
                        <span>添加食物</span>
                    </button>
                </div>

                <!-- 食物分类 -->
                <div class="mb-6">
                    <h2 class="text-lg font-medium text-gray-800 mb-3">食物分类</h2>
                    <div class="flex flex-wrap gap-2">
                        <button class="bg-emerald-600 text-white px-4 py-2 rounded-md flex items-center text-sm">
                            所有分类
                        </button>
                        <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md border border-gray-300 flex items-center text-sm">
                            <i class="fas fa-bread-slice mr-2 text-amber-500"></i>
                            谷物类
                        </button>
                        <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md border border-gray-300 flex items-center text-sm">
                            <i class="fas fa-carrot mr-2 text-orange-500"></i>
                            蔬菜类
                        </button>
                        <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md border border-gray-300 flex items-center text-sm">
                            <i class="fas fa-apple-alt mr-2 text-red-500"></i>
                            水果类
                        </button>
                        <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md border border-gray-300 flex items-center text-sm">
                            <i class="fas fa-drumstick-bite mr-2 text-rose-500"></i>
                            肉类
                        </button>
                        <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md border border-gray-300 flex items-center text-sm">
                            <i class="fas fa-fish mr-2 text-blue-500"></i>
                            水产类
                        </button>
                        <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md border border-gray-300 flex items-center text-sm">
                            <i class="fas fa-egg mr-2 text-yellow-500"></i>
                            蛋奶类
                        </button>
                        <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md border border-gray-300 flex items-center text-sm">
                            <i class="fas fa-seedling mr-2 text-green-500"></i>
                            豆制品
                        </button>
                        <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md border border-gray-300 flex items-center text-sm">
                            <i class="fas fa-cookie mr-2 text-amber-600"></i>
                            零食甜点
                        </button>
                        <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md border border-gray-300 flex items-center text-sm">
                            <i class="fas fa-wine-bottle mr-2 text-purple-500"></i>
                            饮料
                        </button>
                    </div>
                </div>

                <!-- 筛选和搜索 -->
                <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                    <div class="flex flex-wrap gap-4">
                        <div class="relative flex-grow md:max-w-xs">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                                <i class="fas fa-search text-gray-400"></i>
                            </span>
                            <input type="text" class="pl-10 pr-4 py-2 w-full rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" 
                                placeholder="搜索食物...">
                        </div>
                        
                        <div class="flex items-center space-x-4 flex-wrap">
                            <select class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                <option value="">营养素筛选</option>
                                <option value="high_protein">高蛋白</option>
                                <option value="low_fat">低脂肪</option>
                                <option value="low_carb">低碳水</option>
                                <option value="high_fiber">高纤维</option>
                            </select>
                            
                            <select class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                <option value="">所有状态</option>
                                <option value="verified">已验证</option>
                                <option value="unverified">未验证</option>
                            </select>
                        </div>
                        
                        <button class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-md ml-auto">
                            筛选
                        </button>
                    </div>
                </div>

                <!-- 食物列表 -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                    <!-- 食物卡片 1 -->
                    <div class="bg-white rounded-lg shadow-md overflow-hidden">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&h=200&q=80" 
                                class="w-full h-40 object-cover" alt="食物图片">
                            <div class="absolute top-2 left-2">
                                <span class="bg-green-500 text-white text-xs px-2 py-1 rounded-full">已验证</span>
                            </div>
                            <div class="absolute top-2 right-2">
                                <button class="bg-white text-gray-600 rounded-full w-8 h-8 flex items-center justify-center shadow-md hover:bg-gray-100">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                            </div>
                        </div>
                        <div class="p-4">
                            <h3 class="text-lg font-medium text-gray-800">蔬菜沙拉</h3>
                            <p class="text-gray-500 text-sm">蔬菜类</p>
                            <div class="mt-3 flex justify-between items-center">
                                <div>
                                    <p class="text-gray-600 text-sm">100克</p>
                                    <p class="text-lg font-semibold text-emerald-600">45 kcal</p>
                                </div>
                                <div class="space-y-1">
                                    <div class="flex items-center text-xs">
                                        <span class="text-gray-500 w-20">蛋白质:</span>
                                        <span class="font-medium">1.5g</span>
                                    </div>
                                    <div class="flex items-center text-xs">
                                        <span class="text-gray-500 w-20">脂肪:</span>
                                        <span class="font-medium">0.5g</span>
                                    </div>
                                    <div class="flex items-center text-xs">
                                        <span class="text-gray-500 w-20">碳水化合物:</span>
                                        <span class="font-medium">9.5g</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4 flex space-x-2">
                                <button class="flex-1 bg-emerald-100 hover:bg-emerald-200 text-emerald-600 py-2 rounded text-sm">
                                    <i class="fas fa-edit mr-1"></i> 编辑
                                </button>
                                <button class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-600 py-2 rounded text-sm">
                                    <i class="fas fa-eye mr-1"></i> 查看
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 食物卡片 2 -->
                    <div class="bg-white rounded-lg shadow-md overflow-hidden">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1598515214211-89d3c73ae83b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&h=200&q=80" 
                                class="w-full h-40 object-cover" alt="食物图片">
                            <div class="absolute top-2 left-2">
                                <span class="bg-green-500 text-white text-xs px-2 py-1 rounded-full">已验证</span>
                            </div>
                            <div class="absolute top-2 right-2">
                                <button class="bg-white text-gray-600 rounded-full w-8 h-8 flex items-center justify-center shadow-md hover:bg-gray-100">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                            </div>
                        </div>
                        <div class="p-4">
                            <h3 class="text-lg font-medium text-gray-800">鸡胸肉</h3>
                            <p class="text-gray-500 text-sm">肉类</p>
                            <div class="mt-3 flex justify-between items-center">
                                <div>
                                    <p class="text-gray-600 text-sm">100克</p>
                                    <p class="text-lg font-semibold text-emerald-600">165 kcal</p>
                                </div>
                                <div class="space-y-1">
                                    <div class="flex items-center text-xs">
                                        <span class="text-gray-500 w-20">蛋白质:</span>
                                        <span class="font-medium">31.0g</span>
                                    </div>
                                    <div class="flex items-center text-xs">
                                        <span class="text-gray-500 w-20">脂肪:</span>
                                        <span class="font-medium">3.6g</span>
                                    </div>
                                    <div class="flex items-center text-xs">
                                        <span class="text-gray-500 w-20">碳水化合物:</span>
                                        <span class="font-medium">0g</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4 flex space-x-2">
                                <button class="flex-1 bg-emerald-100 hover:bg-emerald-200 text-emerald-600 py-2 rounded text-sm">
                                    <i class="fas fa-edit mr-1"></i> 编辑
                                </button>
                                <button class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-600 py-2 rounded text-sm">
                                    <i class="fas fa-eye mr-1"></i> 查看
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 食物卡片 3 -->
                    <div class="bg-white rounded-lg shadow-md overflow-hidden">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1589365278144-c9e705f843ba?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&h=200&q=80" 
                                class="w-full h-40 object-cover" alt="食物图片">
                            <div class="absolute top-2 left-2">
                                <span class="bg-green-500 text-white text-xs px-2 py-1 rounded-full">已验证</span>
                            </div>
                            <div class="absolute top-2 right-2">
                                <button class="bg-white text-gray-600 rounded-full w-8 h-8 flex items-center justify-center shadow-md hover:bg-gray-100">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                            </div>
                        </div>
                        <div class="p-4">
                            <h3 class="text-lg font-medium text-gray-800">香蕉</h3>
                            <p class="text-gray-500 text-sm">水果类</p>
                            <div class="mt-3 flex justify-between items-center">
                                <div>
                                    <p class="text-gray-600 text-sm">100克</p>
                                    <p class="text-lg font-semibold text-emerald-600">89 kcal</p>
                                </div>
                                <div class="space-y-1">
                                    <div class="flex items-center text-xs">
                                        <span class="text-gray-500 w-20">蛋白质:</span>
                                        <span class="font-medium">1.1g</span>
                                    </div>
                                    <div class="flex items-center text-xs">
                                        <span class="text-gray-500 w-20">脂肪:</span>
                                        <span class="font-medium">0.3g</span>
                                    </div>
                                    <div class="flex items-center text-xs">
                                        <span class="text-gray-500 w-20">碳水化合物:</span>
                                        <span class="font-medium">22.8g</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4 flex space-x-2">
                                <button class="flex-1 bg-emerald-100 hover:bg-emerald-200 text-emerald-600 py-2 rounded text-sm">
                                    <i class="fas fa-edit mr-1"></i> 编辑
                                </button>
                                <button class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-600 py-2 rounded text-sm">
                                    <i class="fas fa-eye mr-1"></i> 查看
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 食物卡片 4 -->
                    <div class="bg-white rounded-lg shadow-md overflow-hidden">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1591123120675-6f7f1aae0e5b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&h=200&q=80" 
                                class="w-full h-40 object-cover" alt="食物图片">
                            <div class="absolute top-2 left-2">
                                <span class="bg-yellow-500 text-white text-xs px-2 py-1 rounded-full">待验证</span>
                            </div>
                            <div class="absolute top-2 right-2">
                                <button class="bg-white text-gray-600 rounded-full w-8 h-8 flex items-center justify-center shadow-md hover:bg-gray-100">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                            </div>
                        </div>
                        <div class="p-4">
                            <h3 class="text-lg font-medium text-gray-800">燕麦粥</h3>
                            <p class="text-gray-500 text-sm">谷物类</p>
                            <div class="mt-3 flex justify-between items-center">
                                <div>
                                    <p class="text-gray-600 text-sm">100克</p>
                                    <p class="text-lg font-semibold text-emerald-600">68 kcal</p>
                                </div>
                                <div class="space-y-1">
                                    <div class="flex items-center text-xs">
                                        <span class="text-gray-500 w-20">蛋白质:</span>
                                        <span class="font-medium">2.4g</span>
                                    </div>
                                    <div class="flex items-center text-xs">
                                        <span class="text-gray-500 w-20">脂肪:</span>
                                        <span class="font-medium">1.4g</span>
                                    </div>
                                    <div class="flex items-center text-xs">
                                        <span class="text-gray-500 w-20">碳水化合物:</span>
                                        <span class="font-medium">12.0g</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4 flex space-x-2">
                                <button class="flex-1 bg-emerald-100 hover:bg-emerald-200 text-emerald-600 py-2 rounded text-sm">
                                    <i class="fas fa-edit mr-1"></i> 编辑
                                </button>
                                <button class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-600 py-2 rounded text-sm">
                                    <i class="fas fa-eye mr-1"></i> 查看
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 分页 -->
                <div class="mt-6 flex justify-center">
                    <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <i class="fas fa-chevron-left"></i>
                        </a>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-emerald-50 text-sm font-medium text-emerald-600 hover:bg-emerald-50">
                            1
                        </a>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            2
                        </a>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            3
                        </a>
                        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                            ...
                        </span>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            8
                        </a>
                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <i class="fas fa-chevron-right"></i>
                        </a>
                    </nav>
                </div>
            </main>
        </div>
    </div>

    <!-- 添加食物模态框 - 默认隐藏 -->
    <div id="addFoodModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50" style="display: none;">
        <div class="bg-white rounded-lg shadow-lg w-full max-w-3xl mx-4 overflow-hidden">
            <!-- 模态框标题 -->
            <div class="bg-emerald-600 text-white px-6 py-4 flex justify-between items-center">
                <h3 class="text-lg font-medium">添加新食物</h3>
                <button id="closeModalBtn" type="button" class="text-white hover:text-gray-200 focus:outline-none">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <!-- 表单内容 -->
            <div class="px-6 py-4 max-h-[80vh] overflow-y-auto">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- 基本信息 -->
                    <div>
                        <h4 class="text-md font-medium text-gray-700 mb-4">基本信息</h4>

                        <!-- 食物名称 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="foodName">
                                食物名称 <span class="text-red-500">*</span>
                            </label>
                            <input type="text" id="foodName" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="请输入食物名称">
                            <p id="foodNameError" class="mt-1 text-sm text-red-600" style="display: none;"></p>
                        </div>

                        <!-- 食物分类 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="foodCategory">
                                食物分类 <span class="text-red-500">*</span>
                            </label>
                            <select id="foodCategory" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                <option value="">请选择分类</option>
                                <option value="谷物类">谷物类</option>
                                <option value="蔬菜类">蔬菜类</option>
                                <option value="水果类">水果类</option>
                                <option value="肉类">肉类</option>
                                <option value="水产类">水产类</option>
                                <option value="蛋奶类">蛋奶类</option>
                                <option value="豆制品">豆制品</option>
                                <option value="零食甜点">零食甜点</option>
                                <option value="饮料">饮料</option>
                            </select>
                            <p id="foodCategoryError" class="mt-1 text-sm text-red-600" style="display: none;"></p>
                        </div>

                        <!-- 单位量 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="servingSize">
                                单位量 <span class="text-red-500">*</span>
                            </label>
                            <div class="flex items-center space-x-2">
                                <input type="number" id="servingSize" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="请输入数值">
                                <select id="servingUnit" class="rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                    <option value="克">克</option>
                                    <option value="毫升">毫升</option>
                                    <option value="份">份</option>
                                    <option value="个">个</option>
                                </select>
                            </div>
                            <p id="servingSizeError" class="mt-1 text-sm text-red-600" style="display: none;"></p>
                        </div>

                        <!-- 食物状态 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                食物状态
                            </label>
                            <div class="flex space-x-4">
                                <label class="inline-flex items-center">
                                    <input type="radio" name="foodStatus" value="已验证" class="form-radio text-emerald-600 focus:ring-emerald-500" checked>
                                    <span class="ml-2">已验证</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="radio" name="foodStatus" value="待验证" class="form-radio text-yellow-500 focus:ring-yellow-500">
                                    <span class="ml-2">待验证</span>
                                </label>
                            </div>
                        </div>

                        <!-- 食物图片 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                食物图片
                            </label>
                            <div class="mt-1 flex items-center">
                                <div id="foodImagePreview" class="w-24 h-24 rounded-md border border-gray-300 flex items-center justify-center bg-gray-100 text-gray-400 overflow-hidden">
                                    <i class="fas fa-image text-2xl"></i>
                                </div>
                                <button type="button" id="uploadImageBtn" class="ml-4 bg-white border border-gray-300 text-gray-700 px-3 py-2 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2">
                                    上传图片
                                </button>
                                <input type="file" id="foodImageInput" accept="image/*" class="hidden">
                            </div>
                            <p class="mt-1 text-xs text-gray-500">推荐尺寸: 300x200 像素，格式: JPG、PNG</p>
                        </div>
                    </div>

                    <!-- 营养成分 -->
                    <div>
                        <h4 class="text-md font-medium text-gray-700 mb-4">营养成分信息</h4>

                        <!-- 热量 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="calories">
                                热量 (kcal) <span class="text-red-500">*</span>
                            </label>
                            <input type="number" id="calories" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="请输入热量">
                            <p id="caloriesError" class="mt-1 text-sm text-red-600" style="display: none;"></p>
                        </div>

                        <!-- 蛋白质 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="protein">
                                蛋白质 (g) <span class="text-red-500">*</span>
                            </label>
                            <input type="number" id="protein" step="0.1" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="请输入蛋白质含量">
                            <p id="proteinError" class="mt-1 text-sm text-red-600" style="display: none;"></p>
                        </div>

                        <!-- 脂肪 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="fat">
                                脂肪 (g) <span class="text-red-500">*</span>
                            </label>
                            <input type="number" id="fat" step="0.1" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="请输入脂肪含量">
                            <p id="fatError" class="mt-1 text-sm text-red-600" style="display: none;"></p>
                        </div>

                        <!-- 碳水化合物 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="carbs">
                                碳水化合物 (g) <span class="text-red-500">*</span>
                            </label>
                            <input type="number" id="carbs" step="0.1" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="请输入碳水化合物含量">
                            <p id="carbsError" class="mt-1 text-sm text-red-600" style="display: none;"></p>
                        </div>

                        <!-- 纤维素 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="fiber">
                                膳食纤维 (g)
                            </label>
                            <input type="number" id="fiber" step="0.1" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="请输入膳食纤维含量">
                        </div>

                        <!-- 备注 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="notes">
                                备注
                            </label>
                            <textarea id="notes" rows="3" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="添加关于这个食物的其他信息"></textarea>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 按钮区域 -->
            <div class="bg-gray-50 px-6 py-4 flex justify-end space-x-3">
                <button type="button" id="cancelBtn" class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
                    取消
                </button>
                <button type="button" id="submitBtn" class="bg-emerald-600 text-white px-4 py-2 rounded-md hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2">
                    添加食物
                </button>
            </div>
        </div>
    </div>

    <!-- 使用原生JavaScript实现模态框功能 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const app = Vue.createApp({
                data() {
                    return {
                        // 组件数据
                    };
                },
                methods: {
                    // 组件方法
                }
            });
            
            app.mount('#app');
            
            // 模态框功能实现
            const openModalBtn = document.getElementById('openAddFoodModalBtn');
            const modal = document.getElementById('addFoodModal');
            const closeModalBtn = document.getElementById('closeModalBtn');
            const cancelBtn = document.getElementById('cancelBtn');
            const submitBtn = document.getElementById('submitBtn');
            const uploadImageBtn = document.getElementById('uploadImageBtn');
            const foodImageInput = document.getElementById('foodImageInput');
            const foodImagePreview = document.getElementById('foodImagePreview');
            
            let selectedImageFile = null;
            
            // 打开模态框
            function openModal() {
                console.log('打开模态框');
                resetForm();
                modal.style.display = 'flex';
            }
            
            // 关闭模态框
            function closeModal() {
                console.log('关闭模态框');
                modal.style.display = 'none';
            }
            
            // 重置表单
            function resetForm() {
                // 清空所有输入字段
                document.getElementById('foodName').value = '';
                document.getElementById('foodCategory').value = '';
                document.getElementById('servingSize').value = '';
                document.getElementById('calories').value = '';
                document.getElementById('protein').value = '';
                document.getElementById('fat').value = '';
                document.getElementById('carbs').value = '';
                document.getElementById('fiber').value = '';
                document.getElementById('notes').value = '';
                
                // 重置单位和状态
                document.getElementById('servingUnit').value = '克';
                document.querySelector('input[name="foodStatus"][value="已验证"]').checked = true;
                
                // 重置图片预览
                foodImagePreview.innerHTML = '<i class="fas fa-image text-2xl"></i>';
                selectedImageFile = null;
                
                // 隐藏所有错误信息
                const errorElements = document.querySelectorAll('[id$="Error"]');
                errorElements.forEach(el => el.style.display = 'none');
            }
            
            // 处理图片上传
            function handleImageUpload() {
                foodImageInput.click();
            }
            
            // 处理图片预览
            function handleImageChange(event) {
                const file = event.target.files[0];
                if (file) {
                    selectedImageFile = file;
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        foodImagePreview.innerHTML = '';
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.className = 'w-full h-full object-cover';
                        foodImagePreview.appendChild(img);
                    };
                    reader.readAsDataURL(file);
                }
            }
            
            // 验证表单
            function validateForm() {
                let isValid = true;
                
                // 隐藏所有错误信息
                const errorElements = document.querySelectorAll('[id$="Error"]');
                errorElements.forEach(el => el.style.display = 'none');
                
                // 验证食物名称
                const foodName = document.getElementById('foodName').value.trim();
                if (!foodName) {
                    document.getElementById('foodNameError').textContent = '请输入食物名称';
                    document.getElementById('foodNameError').style.display = 'block';
                    isValid = false;
                }
                
                // 验证食物分类
                const foodCategory = document.getElementById('foodCategory').value;
                if (!foodCategory) {
                    document.getElementById('foodCategoryError').textContent = '请选择食物分类';
                    document.getElementById('foodCategoryError').style.display = 'block';
                    isValid = false;
                }
                
                // 验证单位量
                const servingSize = document.getElementById('servingSize').value;
                if (!servingSize) {
                    document.getElementById('servingSizeError').textContent = '请输入单位量';
                    document.getElementById('servingSizeError').style.display = 'block';
                    isValid = false;
                } else if (isNaN(servingSize) || servingSize <= 0) {
                    document.getElementById('servingSizeError').textContent = '请输入有效的单位量';
                    document.getElementById('servingSizeError').style.display = 'block';
                    isValid = false;
                }
                
                // 验证热量
                const calories = document.getElementById('calories').value;
                if (!calories) {
                    document.getElementById('caloriesError').textContent = '请输入热量';
                    document.getElementById('caloriesError').style.display = 'block';
                    isValid = false;
                } else if (isNaN(calories) || calories < 0) {
                    document.getElementById('caloriesError').textContent = '请输入有效的热量值';
                    document.getElementById('caloriesError').style.display = 'block';
                    isValid = false;
                }
                
                // 验证蛋白质
                const protein = document.getElementById('protein').value;
                if (!protein) {
                    document.getElementById('proteinError').textContent = '请输入蛋白质含量';
                    document.getElementById('proteinError').style.display = 'block';
                    isValid = false;
                } else if (isNaN(protein) || protein < 0) {
                    document.getElementById('proteinError').textContent = '请输入有效的蛋白质值';
                    document.getElementById('proteinError').style.display = 'block';
                    isValid = false;
                }
                
                // 验证脂肪
                const fat = document.getElementById('fat').value;
                if (!fat) {
                    document.getElementById('fatError').textContent = '请输入脂肪含量';
                    document.getElementById('fatError').style.display = 'block';
                    isValid = false;
                } else if (isNaN(fat) || fat < 0) {
                    document.getElementById('fatError').textContent = '请输入有效的脂肪值';
                    document.getElementById('fatError').style.display = 'block';
                    isValid = false;
                }
                
                // 验证碳水化合物
                const carbs = document.getElementById('carbs').value;
                if (!carbs) {
                    document.getElementById('carbsError').textContent = '请输入碳水化合物含量';
                    document.getElementById('carbsError').style.display = 'block';
                    isValid = false;
                } else if (isNaN(carbs) || carbs < 0) {
                    document.getElementById('carbsError').textContent = '请输入有效的碳水化合物值';
                    document.getElementById('carbsError').style.display = 'block';
                    isValid = false;
                }
                
                return isValid;
            }
            
            // 提交表单
            function submitForm() {
                if (validateForm()) {
                    // 收集表单数据
                    const formData = {
                        foodName: document.getElementById('foodName').value.trim(),
                        foodCategory: document.getElementById('foodCategory').value,
                        servingSize: document.getElementById('servingSize').value,
                        servingUnit: document.getElementById('servingUnit').value,
                        foodStatus: document.querySelector('input[name="foodStatus"]:checked').value,
                        calories: document.getElementById('calories').value,
                        protein: document.getElementById('protein').value,
                        fat: document.getElementById('fat').value,
                        carbs: document.getElementById('carbs').value,
                        fiber: document.getElementById('fiber').value || '0',
                        notes: document.getElementById('notes').value.trim(),
                        imageFile: selectedImageFile
                    };
                    
                    console.log('表单数据：', formData);
                    // 这里应该发送请求到服务器添加食物
                    
                    // 模拟添加成功
                    alert('食物添加成功！');
                    closeModal();
                    
                    // 刷新食物列表（这里可以根据实际情况实现）
                }
            }
            
            // 事件监听
            openModalBtn.addEventListener('click', openModal);
            closeModalBtn.addEventListener('click', closeModal);
            cancelBtn.addEventListener('click', closeModal);
            submitBtn.addEventListener('click', submitForm);
            uploadImageBtn.addEventListener('click', handleImageUpload);
            foodImageInput.addEventListener('change', handleImageChange);
            
            // 确保模态框初始为隐藏状态
            modal.style.display = 'none';
        });
    </script>
</body>
</html> 